// color picker object

color_picker_callback = 'alert("ColorPicker callback was not set!")';
color_picker_red = -1;
color_picker_green = -1;
color_picker_blue = -1;

function colorPickerPreset(AThis,AEvent) {
  // callback when user click on preset color box
  //debug('colorPickerPreset(...1)');
  var custom = document.getElementById('ColorPickerCustom');
  custom.style.backgroundColor = AThis.style.backgroundColor;
  // set up RGB bars
  var c = AThis.style.backgroundColor.replace('rgb(','').replace(')','').split(',');
  var cs = c+' ';
  if (cs.charAt(0)=='#') {
    //debug('  parsing #RRGGBB from '+c);
    var r = parseInt(cs.substr(1,2),16);
    var g = parseInt(cs.substr(3,2),16);
    var b = parseInt(cs.substr(5,2),16);
  } else {
    var r = 1*c[0];
    var g = 1*c[1];
    var b = 1*c[2];
  }
  //debug('  c='+c+' cs='+cs+' rgb='+r+','+g+','+b);
  document.getElementById('ColorPickerRed').style.paddingLeft = r;
  document.getElementById('ColorPickerRed').style.width = 256-r+2;
  document.getElementById('ColorPickerGreen').style.paddingLeft = g;
  document.getElementById('ColorPickerGreen').style.width = 256-g+2;
  document.getElementById('ColorPickerBlue').style.paddingLeft = b;
  document.getElementById('ColorPickerBlue').style.width = 256-b+2;
  color_picker_red = r;
  color_picker_green = g;
  color_picker_blue = b;
  //debug('  done')
}

function colorPickerRgbToHex(ARgb) {
  // convert 512 to "FF"
  ARgb /= 2;
  var char = "0123456789ABCDEF";
  return String(char.charAt(Math.floor(ARgb / 16))) + String(char.charAt(ARgb - (Math.floor(ARgb / 16) * 16)));
}   

function colorPickerRGB(AThis,AEvent) {
  // click on one of three RGB sliders
  var x = AEvent.clientX-AThis.parentNode.offsetLeft-AThis.offsetLeft; 
  AThis.style.paddingLeft = Math.min(x,256);
  AThis.style.width = 258-x;
  var custom = document.getElementById('ColorPickerCustom');
  var r = 1*document.getElementById('ColorPickerRed').style.paddingLeft.replace('px','');
  var g = 1*document.getElementById('ColorPickerGreen').style.paddingLeft.replace('px','');
  var b = 1*document.getElementById('ColorPickerBlue').style.paddingLeft.replace('px','');
  var s = colorPickerRgbToHex(2*r)+colorPickerRgbToHex(2*g)+colorPickerRgbToHex(2*b);
  var custom = document.getElementById('ColorPickerCustom');
  custom.style.backgroundColor = '#'+s; 
  color_picker_red = r;
  color_picker_green = g;
  color_picker_blue = b;
  ///document.title = s+' rgb='+r+','+g+','+b+' - '+custom.style.backgroundColor;
}

function colorPickerButton(AUse) {
  // click on ok/cancel button
  var cp = document.getElementById('ColorPicker');
  if (AUse)
    eval(color_picker_callback);
  else
    cp.style.display = 'none';    
}

function ColorPickerCreate() {
  // create color picker element
  var cp = document.getElementById('ColorPicker');
  var s = ''; 
//    s += '<div id="ColorPicker">';
//    s += '</div>';
    s += '  <div id="ColorPickerCustom" class="preset" style="float: right; width: 32px; height: 32px; background: black; float: right;" onclick="colorPickerPreset(this,event)"></div>';
    s += '  <span style="float: right;">Current:&nbsp;</span>';
    s += '  <div class="tit">Preset colors:</div>';
    s += '  <div class="preset" style="background: #ff0000;" onclick="colorPickerPreset(this,event)"></div>';
    s += '  <div class="preset" style="background: #00ff00;" onclick="colorPickerPreset(this,event)"></div>';
    s += '  <div class="preset" style="background: #0000ff;" onclick="colorPickerPreset(this,event)"></div>';
    s += '  <div class="preset" style="background: #303030;" onclick="colorPickerPreset(this,event)"></div>';
    s += '  <div class="preset" style="background: #ff00ff;" onclick="colorPickerPreset(this,event)"></div>';
    s += '  <div class="preset" style="background: #ffffff;" onclick="colorPickerPreset(this,event)"></div>';
    s += '  <div class="preset" style="background: #ff7777;" onclick="colorPickerPreset(this,event)"></div>';
    s += '  <div class="preset" style="background: #77ff77;" onclick="colorPickerPreset(this,event)"></div>';
    s += '  <div class="preset" style="background: #7777ff;" onclick="colorPickerPreset(this,event)"></div>';
    s += '  <div class="preset" style="background: #777777;" onclick="colorPickerPreset(this,event)"></div>';
    s += '  <div class="preset" style="background: #ff7744;" onclick="colorPickerPreset(this,event)"></div>';
    s += '  <div class="preset" style="background: #ffff77;" onclick="colorPickerPreset(this,event)"></div>';
    s += '  <div class="tit"></div>';
    s += '  <div id="ColorPickerRed" class="color" style="background: #F77;" onclick="colorPickerRGB(this,event)">|</div>';
    s += '  <div id="ColorPickerGreen" class="color" style="background: #7F7;" onclick="colorPickerRGB(this,event)">|</div>';
    s += '  <div id="ColorPickerBlue" class="color" style="background: #AAF;" onclick="colorPickerRGB(this,event)">|</div>';
    s += '  <button onclick="colorPickerButton(true)">Use</button>';
    s += '  <button onclick="colorPickerButton(false)">Close</button>';
  cp.innerHTML = s;
}

function ColorPicker(ACallback) {
  // show color picker, create it if called first time, execute ACallback when USE is pressed, hide on Close button
  color_picker_callback = ACallback;
  var cp = document.getElementById('ColorPicker');
  if (cp.innerHTML.trim() == '')
    ColorPickerCreate();
  var cp = document.getElementById('ColorPicker');
  if (cp.style.display == 'block')
    cp.style.display = 'none';
  else
    cp.style.display = 'block';
}
